<template>
   <!-- 企宽在途二级图 -->
  <div>
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :md="4" :sm="24">
          <div style="display:flex;flex-direction:row">
            <div style="width:80px;margin:5px 0 0 10px">类型:</div>
            <a-select v-model="queryParam.country" placeholder="请选择区县">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="鼓楼">鼓楼</a-select-option>
              <a-select-option value="马尾">马尾</a-select-option>
              <a-select-option value="台江">台江</a-select-option>
              <a-select-option value="晋安">晋安</a-select-option>
              <a-select-option value="仓山">仓山</a-select-option>
              <a-select-option value="长乐">长乐</a-select-option>
              <a-select-option value="福清">福清</a-select-option>
              <a-select-option value="闽侯">闽侯</a-select-option>
              <a-select-option value="罗源">罗源</a-select-option>
              <a-select-option value="闽清">闽清</a-select-option>
              <a-select-option value="连江">连江</a-select-option>
              <a-select-option value="平潭">平潭</a-select-option>
              <a-select-option value="永泰">永泰</a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :md="5" :sm="24">
          <div style="display:flex;flex-direction:row">
            <div style="width:80px;margin:5px 0 0 10px">时间:</div>
            <a-range-picker v-model="timeSelect" 
             style="width:300px"
            :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" @change="onChange" />
          </div>
        </a-col>
        <a-col :md="1" :sm="24">
          <a-button type="primary" @click="selectEvent">查询</a-button>
        </a-col>

      </a-row>
    </a-form>
    <div id="container"></div>
  </div>
</template>

<script>
import { getQkIngDay } from '@/api/qkApi'
import moment from 'moment'
import { Line } from '@antv/g2plot'
import {} from '@/utils/util'
import {} from '@/api/public'
export default {
  data() {
    return {
      queryParam: {},
      timeSelect: '',
      surveyReceiptPlot: '',
      data: [],
      searchType:1,
      linePlot:'',
      
    }
  },

  created() {
    this.timeSelect = [moment().subtract(7, 'days'), moment()]
    this.queryParam.startTime = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss')
    this.queryParam.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
    
    this.getDataInfo()
  },
  mounted() {},
  methods: {
    // 标签切换
    callBack(key) {},
    moment,
      // 初始化数据
    charInit(data) {
       this.linePlot = new Line(document.getElementById('container'), {
        title: {
          visible: true,
          text: '企宽-受理-在途趋势图',
         
        },
        description: {
          visible: true,
          text: '',
        },
        legend:{
         position: 'top-right',
        },
        data,
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        groupField: 'country',
 
      })

      this.linePlot.render()
    },
    //图表数据查询
    getDataInfo() {
      getQkIngDay(this.queryParam).then(
        (res) => {
          if(res.code == 200){
          let dataList = []
          res.data.map(function (currentValue, index, arr) {        
            let infoA ={}
            let infoB ={}
            let infoC ={}
            infoA.date = currentValue.time
            infoA.type = "日在途量"
            infoA.value = currentValue.totalNum
            infoB.date = currentValue.time
            infoB.type = "日产出量"
            infoB.value = currentValue.rateNum        
            infoC.date = currentValue.time
            infoC.type = "日受理量"
            infoC.value = currentValue.yesterdayNum
            dataList.push(infoA)
            dataList.push(infoB)
            dataList.push(infoC)         
          }) 
           this.searchType == 1 ? this.charInit(dataList):this.linePlot.changeData(dataList)                   
          }else{
           this.$message.error(res.msg)  
          }
          
        },
        (error) => {
          this.$message.error(error)
        }
      )
    },
    //时间查询
    onChange(date, dateString) {
      this.queryParam.startTime = dateString[0] + ' 00:00:00'
      this.queryParam.endTime = dateString[1] + ' 23:59:59'
    },
    //查询
    selectEvent() {
      this.searchType =2
      this.getDataInfo()
    },
   
  },
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
}
.fkcompany {
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  margin-left: 10px;
  margin-top: -2px;
}
.rangePicker {
  width: 220px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}
</style>
